<!--Created by daminghu-cli yasenagat# on 2020-05-08 16:28:01-->


<template>
    <div class="fillcontain">

        <ve-tree :data="treeChartData" :extend="chartExtend" :tooltip-formatter="tooltipFormatter"
                 :settings="chartSettings"></ve-tree>

        <ve-pie :data="pieChartData"></ve-pie>

        <section class="data_section">
        <header class="data_header">数据统计</header>
        <el-row :gutter="12">


        <el-col class="cel" :span="8">
        <el-card :body-style="{ padding: '10px' }" shadow="hover">
        <div @click="handlerClick('/tb_agent')" class="data">
        <div class="label">Agent数量</div>
        <div class="count">{{ count0 }}</div>
        </div>
        </el-card>
        </el-col>


        <el-col class="cel" :span="8">
        <el-card :body-style="{ padding: '10px' }" shadow="hover">
        <div @click="handlerClick('/tb_agent_task')" class="data">
        <div class="label">Agent任务数量</div>
        <div class="count">{{ count1 }}</div>
        </div>
        </el-card>
        </el-col>


        <el-col class="cel" :span="8">
        <el-card :body-style="{ padding: '10px' }" shadow="hover">
        <div @click="handlerClick('/tb_svr')" class="data">
        <div class="label">Svr数量</div>
        <div class="count">{{ count2 }}</div>
        </div>
        </el-card>
        </el-col>


        <el-col class="cel" :span="8">
        <el-card :body-style="{ padding: '10px' }" shadow="hover">
        <div @click="handlerClick('/tb_svr_task')" class="data">
        <div class="label">Svr任务数量</div>
        <div class="count">{{ count3 }}</div>
        </div>
        </el-card>
        </el-col>


        </el-row>
        </section>
    </div>
</template>

<script>

    import {


        api_agent_svr_tree,
        api_readcount_tb_agent,


        api_readcount_tb_agent_task,


        api_readcount_tb_svr,


        api_readcount_tb_svr_task,
        isResultOk,

    } from "../api/api";

    export default {
        data() {
            return {


                count0: 0,


                count1: 0,


                count2: 0,


                count3: 0,


                form: {},
                option: {
                    data: []
                },
                pieChartData: {},
                treeData: {},
                treeChartData: {},
                chartExtend: {
                    tooltip: {
                        alwaysShowContent: true
                    }
                },
                chartSettings: {
                    seriesMap: {
                        tree1: {
                            left: '2%',
                            right: '2%',
                            top: '8%',
                            bottom: '20%',

                            layout: 'orthogonal',
                            // layout: 'radial',

                            symbolSize: 40,
                            // symbol: 'pin',
                            symbol: 'diamond',

                            orient: 'vertical',

                            expandAndCollapse: true,

                            label: {
                                position: 'bottom',
                                rotate: 0,
                                verticalAlign: 'middle',
                                align: 'right',
                                fontSize: 20
                            },

                            leaves: {
                                label: {
                                    position: 'bottom',
                                    rotate: 0,
                                    verticalAlign: 'middle',
                                    align: 'left'
                                }
                            },

                            animationDurationUpdate: 750
                        }
                    }
                }
            }
        }
        ,
        components: {}
        ,
        created() {
            this.initData();
        }
        ,
        methods: {
            async initData() {
                const res = await  api_agent_svr_tree()

                if (isResultOk(res)) {
                    this.treeChartData = {
                        columns: ['name', 'value'],
                        rows: [
                            {
                                name: 'tree1',
                                value: [res.body.items]
                            }
                        ]
                    };
                    console.log(this.treeChartData)
                }

                Promise.all([


                    api_readcount_tb_agent(),


                    api_readcount_tb_agent_task(),


                    api_readcount_tb_svr(),


                    api_readcount_tb_svr_task(),


                ]).then(res => {


                    this.count0 = res[0].body.count;


                    this.count1 = res[1].body.count;


                    this.count2 = res[2].body.count;


                    this.count3 = res[3].body.count;


                    this.pieChartData = {
                        columns: ['label', 'count'],
                        rows: [


                            {'label': 'Agent数量', 'count': this.count0},


                            {'label': 'Agent任务数量', 'count': this.count1},


                            {'label': 'Svr数量', 'count': this.count2},


                            {'label': 'Svr任务数量', 'count': this.count3},


                        ]
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
            ,
            handlerClick(path) {
                this.$router.push({path: path})
            },
            tooltipFormatter(v) {
                return [
                    `name: ${v.data.name}`,
                    `id: ${v.data.id}`,
                    `ip: ${v.data.ip}`,
                    `type: ${v.data.type}`,
                    `<!--<a target="_blank" href="${v.data.link}">${v.data.link}</a>-->`
                ].join('<br>')
            }
        }
        ,
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .data_section {
        padding: 20px;
        margin-bottom: 40px;
        .data_header {
            text-align: center;
            font-size: 30px;
            margin-bottom: 10px;
        }
        .cel {
            padding: 20px;
        }
        .data {
            margin: 10px;
            padding: 10px;
            /*padding: 20px;*/
            text-align: center;
            font-size: 14px;
            color: #666;
            border-radius: 6px;
            background: #E5E9F2;
            .count {
                color: #20A1FF;
                font-size: 26px;

            }
            .label {
                border-radius: 6px;
                font-size: 22px;
                padding: 4px 0;
                color: #FF8800;
                display: inline-block;
            }
        }
    }


</style>
